<template>
  <div class="component-tabbar">
    <div class="tab" @click="changeTab('list')">
      <p :class="{'active': currentTab === 'list'}">项目管理</p>
    </div>
    <div class="tab" @click="changeTab('assess')">
      <p :class="{'active': currentTab === 'assess'}">我的评分</p>
    </div>
    <div v-if="isManager || isTeamer" class="tab" @click="changeTab('check')">
      <p :class="{'active': currentTab === 'check'}">我的审核</p>
    </div>
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";

export default {
  name: 'tab',
  data() {
    return {
      
    }
  },
  props: ['currentTab'],
  mixins: [dingMixin],
  computed: {
    isManager() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1247700573888290817')
    },
    isTeamer() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1321365196464197633')
    },
    isNormal() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1321366856351617026')
    },
    isGuancha() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1301793232233959426')
    }
  },
  methods: {
    changeTab(tab) {
      this.$router.push({ name: 'mproject-' + tab})
    }
  } 
}
</script>

<style lang="scss" scoped>
  .component-tabbar{
    position:fixed;
    bottom:0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #FFF;
    box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
    z-index: 99;
    display: flex;
    .tab{
      flex: 1;
      line-height: 46px;
      p{
        margin: 0;
        color: #969696;
        &.active{
          color: #409EFF;
        }
      }
    }
  }
</style>